<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>DOM Scripting: Web Design with JavaScript and the Document Object Model</title>
		<link rel="stylesheet" href="styles/basic.css">
	</head>
	<body>
		<div id="container">
			<header>
				<a href="http://domscripting.com/"><img src="images/domscripting_small.gif" alt="DOM Scripting" /></a>
				<img src="images/webdesignwiththedom.gif" alt="Web Design with JavaScript and the Document Object Model" />
			</header>
			
			<article>
				<h1>Code Examples</h1>
				<ol>
					<li><h2>A brief history of JavaScript</h2></li>
					<li><h2>JavaScript Syntax</h2></li>
					<li><h2>The Document Object Model</h2>
						<ul>
							<li><a href="03/test.html">Test</a>: <code>alert</code> title attribute</li>
						</ul>
					</li>
					<li><h2>A JavaScript image gallery</h2>
						<ul>
						<li><a href="04/imagegallery/1/gallery.html">Image Gallery 1</a>: no JavaScript</li>
						<li><a href="04/imagegallery/2/gallery.html">Image Gallery 2</a>: swapping the pictures</li>
						<li><a href="04/imagegallery/3/gallery.html">Image Gallery 3</a>: swapping pictures and text</li>
						<li><a href="04/imagegallery/4/gallery.html">Image Gallery 4</a>: styled</li>
						</ul>
					</li>
					<li><h2>Best Practices</h2>
						<ul>
						<li><a href="05/example.html">Example</a>: unobtrusive popup window</li>
						</ul>
					</li>
					<li><h2>Image Gallery Revisited</h2>
						<ul>
						<li><a href="06/imagegallery/1/gallery.html">Image Gallery 1</a></li>
						<li><a href="06/imagegallery/2/gallery.html">Image Gallery 2</a></li>
						<li><a href="06/imagegallery/3/gallery.html">Image Gallery 3</a></li>
						</ul>
					</li>
					<li><h2>Creating markup on the fly</h2>
						<ul>
						<li><a href="07/1/test.html">Test</a>: <code>document.write</code> inline</li>
						<li><a href="07/2/test.html">Test</a>: <code>document.write</code> external</li>
						<li><a href="07/3/test.html">Test</a>: <code>alert innerHTML</code></li>
						<li><a href="07/4/test.html">Test</a>: updating <code>innerHTML</code></li>
						<li><a href="07/5/test.html">Test</a>: <code>alert</code> node info</li>
						<li><a href="07/6/test.html">Test</a>: <code>createElement</code></li>
						<li><a href="07/7/test.html">Test</a>: <code>createTextNode</code></li>
						<li><a href="07/8/test.html">Test</a>: <code>appendChild</code></li>
						<li><a href="07/9/test.html">Test</a>: documentFragments</li>
						<li><a href="07/10/test.html">Test</a>: documentFragments</li>
						<li><a href="07/ajax/ajax.html">Ajax</a>: getHTTPObject</li>
						</ul>
					</li>
					<li><h2>Enhancing content</h2>
						<ul>
						<li><a href="08/abbreviations/explanation.html">Display abbreviations</a></li>
						<li><a href="08/citations/explanation.html">Display citations</a></li>
						<li><a href="08/accesskeys/explanation.html">Display access keys</a></li>
						</ul>
					</li>
				</ol>
			</article>
		</div>
		
		<script></script>
	</body>
</html>